<template>
  <basic-container>
    <avue-crud
        ref="crud"
        v-bind="bindVal"
        v-on="onEvent"
        v-model:page="page"
        v-model="form">
      <template #icon="scope">
        <i :class="scope.row.icon" style="font-size: 24px"></i>
      </template>
      <template #menu="{row,index,size}">


        <el-button v-if="row.type != 3" text type="primary" icon="Plus" @click="openSave(row,index)">新增
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {baseUrl} from "../../../config/env";
import {deleteMenu, menuTree, saveMenu, updateMenu} from '@/api/admin/menu.js'
import iconList from "@/config/iconList";

export default window.$simpleCrudCommon({
  data() {
    return {
      parentId: undefined,

      crudOptionProps: {
        name: 'sys/menu',
        apiPrefix: '/sys/menu',
        permissionOption: {
          enable: true

        },
        apiOption: {
          // 列表接口名称
          listApi: 'menuTree',
          // 列表接口
          listUrl: '/page',
        },
        // 表格配置,具体配置参考 https://www.avuejs.com/crud/crud-doc.html
        tableOption: {
          rowKey: 'id',
          rowParentKey: 'parentId',
          // defaultExpandAll:true,
          column: [
            {
              label: '菜单名称',
              prop: 'name',
              required: true
            },
            {
              label: '路径',
              prop: 'path',
              required: true
            },
            {
              label: "组件",
              prop: "component"
            },
            {
              label: "菜单类型",
              prop: "type",
              type: 'radio',
              required: true,
              dictType: "MENU_TYPE",
              // dicUrl: baseUrl + "/system/sysDict/dict/MENU_TYPE",
              control: (val, form) => {
                if (val == '3') {
                  // 当为按钮的时候
                  return {
                    permission: {
                      display: true
                    },
                    name: {
                      label: "按钮名称"
                    },
                    path: {
                      display: false
                    }
                    , component: {
                      display: false
                    },
                    keepAlive: {
                      display: false
                    },
                    blank: {
                      display: false
                    },
                    icon: {
                      display: false
                    }

                  }
                } else if (val == '0' || val == '1') {
                  // 左侧和顶部目录
                  return {
                    permission: {
                      display: false
                    },
                    name: {
                      label: "菜单名称"
                    },
                    path: {
                      display: true
                    }
                    , component: {
                      display: false
                    },
                    keepAlive: {
                      display: false
                    },
                    blank: {
                      display: false
                    },

                  }
                } else {
                  return {
                    permission: {
                      display: false
                    },
                    name: {
                      label: "菜单名称"
                    },
                    path: {
                      display: true
                    }
                    , component: {
                      display: true
                    },
                    keepAlive: {
                      display: true
                    },
                    blank: {
                      display: true
                    },
                    icon: {
                      display: true
                    }
                  }
                }
              }
            },
            {
              label: '父菜单',
              prop: 'parentId',
              type: 'tree',
              hide: true,
              required: true,

              dicUrl: baseUrl + '/system/sysMenu/allTree',

              props: {
                label: 'name',
                value: 'id'
              },
              // dicFormatter: (res) => {
              //   console.log(res.data)
              //   let root = [
              //     {
              //       id: -1,
              //       name: '根菜单',
              //       // children: res.data
              //     }
              //   ]
              //   console.log(root)
              //   return root;
              // }

            },

            {
              label: '图标选择器',
              prop: 'icon',
              type: 'icon',


              minRows: 6,
              iconList: iconList,
              display: true
            },

            {
              label: "排序",
              prop: "sort",
              type: "number",
              value: '0'
            },
            {
              label: "是否保持活跃",
              prop: "keepAlive",
              type: 'radio',
              value: '0',
              dictType: "COMMON_FLAG"
              // dicUrl: baseUrl + "/system/sysDict/dict/COMMON_FLAG"
            },

            {
              label: "是否外链",
              prop: "blank",
              type: 'radio',
              value: '1',
              dictType: "COMMON_FLAG"
              // dicUrl: baseUrl + "/system/sysDict/dict/COMMON_FLAG"
            },
            {
              label: "权限",
              prop: "permission",
              display: false
            }

          ],
        }
      }


    };
  },
  created() {

  },
  methods: {
    rowDel(row, index, done) {
      this.$confirm(`此操作将永久删除序号【${row.name}】的数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu(row.id).then(res => {
          this.$message.success('删除成功')
          console.log("1111")
          this.getList();
          done();
        });
      })
    },
    openSave(row, index) {
      console.log(row, index);
      let parentId = row.id;
      row.id = null;
      row.parentId = parentId;
      let row2 = {
        parentId: parentId
      }
      this.$refs.crud.rowEdit(row2, index)
    },
    rowSave(row, done) {
      // row.parentId = this.parentId;
      // row.id = new Date().getTime()
      // this.parentId = undefined;
      // done(row)
      saveMenu(row).then(res => {
        this.$message.success('新增成功')
        this.getList();
        // 这里需要更新一下字典值
        this.$refs.crud.dicInit('parentId');
        done()
      });
    },
    rowUpdate(row, index, done) {

      if (row.id) {
        updateMenu(row).then(res => {
          this.$message.success('修改成功')
          this.getList();
          // 这里需要更新一下字典值
          this.$refs.crud.dicInit('parentId');
          done()
        });
      } else {
        saveMenu(row).then(res => {
          this.$message.success('新增成功')
          this.getList();
          // 这里需要更新一下字典值
          this.$refs.crud.dicInit('parentId');
          done()
        });
      }

    },
    handleAdd(row) {

    },
    getList() {
      menuTree().then(res => {
        this.data = res.data
        console.log(res)
      });
    }
  }

}, {})
</script>

<style lang="scss" scoped>
</style>
